<script lang='ts' setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox, ElScrollbar } from 'element-plus'
import { useRouter } from 'vue-router'
import { ListCard } from '../../model/dataset/components'
import { MenuTree } from '@/components'
import type { CardProduct } from '@/views/model/dataset/components/list-card/props'

const router = useRouter()

const productList = ref([{
  index: 1,
  isSetup: true,
  type: 4,
  name: '1111111',
  description:
    '这是描述',
}, {
  index: 2,
  isSetup: false,
  type: 4,
  name: '2222222',
  description:
    '这是描述',
}])

const handleList = [{
  title: '设计',
  icon: 'i-ic:baseline-design-services', // svg-icon name
  click: () => {
    router.push({
      path: '/dashboard/edit/1111111',
    })
  },
}, {
  title: '编辑',
  icon: 'i-akar-icons:edit', // svg-icon name
  click: () => {

  },
}, {
  title: '预览',
  icon: 'i-fluent:preview-link-16-filled', // svg-icon name
  click: () => {

  },
}, {
  title: '复制',
  icon: 'i-fa6-solid:clone', // svg-icon name
  click: () => {

  },
}, {
  title: '下载',
  icon: 'i-ri:download-cloud-fill', // svg-icon name
  click: () => {

  },
}, {
  title: '删除',
  icon: 'i-ic:round-delete', // svg-icon name
  click: (product: CardProduct) => {
    ElMessageBox.confirm(
      (product
        ? `确认删除后${product.name}的所有产品信息将被清空, 且无法恢复`
        : ''),
      '提示',
      {
        type: 'warning',
      },
    )
      .then(() => {
        ElMessage.success('删除成功')
      })
      .catch(() => { })
  },
}]
</script>

<template>
  <div class="h-full flex p-4">
    <ElCard class="me-4 h-full w-[200px]">
      <MenuTree />
    </ElCard>
    <div class="w-0 flex-auto">
      <ElScrollbar>
        <div class="grid" :class="$style.list">
          <ListCard v-for="(product, index) in productList" :key="index" :product="product" :handle-list="handleList" />
        </div>
      </ElScrollBar>
    </div>
  </div>
</template>

<style lang="scss" module>
.list {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: repeat(auto-fill, 200px);
  grid-gap: 16px;
}
</style>
